<template>
  <div class="wrapper">
    <el-container>
      <el-aside width="300px" class="aside">
        <el-collapse v-model="activeName">
          <el-collapse-item title="普通组件" name="1">
            <div class="assemblyContainer">
              <!-- 组件渲染 -->
              <el-popover
                placement="top-start"
                width="50"
                trigger="hover"
                v-for="(item, i) in assemblyList"
                :key="i"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.img"
                  :fit="'fill'"
                  >{{ item.name }}</el-image
                >
                <img
                  class="assembly"
                  style="width: 50px; height: 50px"
                  slot="reference"
                  :src="item.img"
                  @click="newAssembly(item)"
                />
              </el-popover>
            </div>
          </el-collapse-item>
          <el-collapse-item title="高级组件" name="2">
            <div class="assemblyContainer">
              <!-- 组件渲染 -->
              <el-popover
                placement="top-start"
                width="50"
                trigger="hover"
                v-for="(item, i) in assemblyList"
                :key="i"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.img"
                  :fit="'fill'"
                  >{{ item.name }}</el-image
                >
                <img
                  class="assembly"
                  style="width: 50px; height: 50px"
                  slot="reference"
                  :src="item.img"
                  @click="newAssembly(item)"
                />
              </el-popover>
            </div>
          </el-collapse-item>
          <el-collapse-item title="顶级组件" name="3">
            <div class="assemblyContainer">
              <!-- 组件渲染 -->
              <el-popover
                placement="top-start"
                width="50"
                trigger="hover"
                v-for="(item, i) in assemblyList"
                :key="i"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.img"
                  :fit="'fill'"
                  >{{ item.name }}</el-image
                >
                <img
                  class="assembly"
                  style="width: 50px; height: 50px"
                  slot="reference"
                  :src="item.img"
                  @click="newAssembly(item)"
                />
              </el-popover>
            </div>
          </el-collapse-item>
          <el-collapse-item title="其他组件" name="4">
            <div class="assemblyContainer">
              <!-- 组件渲染 -->
              <el-popover
                placement="top-start"
                width="50"
                trigger="hover"
                v-for="(item, i) in assemblyList"
                :key="i"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.img"
                  :fit="'fill'"
                  >{{ item.name }}</el-image
                >
                <img
                  class="assembly"
                  style="width: 50px; height: 50px"
                  slot="reference"
                  :src="item.img"
                  @click="newAssembly(item)"
                />
              </el-popover>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-aside>
      <el-container>
        <el-header>
          <div>头部控制区</div>
        </el-header>
        <el-main ref="mainPaintArea" id="paintArea">
          <!-- 绘图区域 -->
          <!-- <canvas id="paint" ref="canvas" width="1100" height="600">
            <div class="canvas" id="canvas">
              <div v-for="(item, i) in dataList" :key="i" v-drag="item"></div>
            </div> 
          </canvas>-->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import Assembly from "../utils/paint";
import * as PIXI from "pixi.js";
export default {
  watch: {
    // dataList:{
    //   handler(){
    //     console.log(this.dataList)
    //   },
    //   deep:true
    // }
  },
  mounted() {
    this.initPaint();
    this.addTexture()
  },
  methods: {
    newAssembly(data) {
      this.dataList = [
        ...this.dataList,
        {
          ...data,
          positionX: 0,
          positionY: 0,
          link: [],
          id: Date.parse(new Date()),
          width: 50,
          height: 50,
        },
      ];
      this.addSpirit({
        ...data,
        positionX: 0,
        positionY: 0,
        link: [],
        id: Date.parse(new Date()),
        width: 50,
        height: 50,
      });
      // let oneAssembly = new Assembly(data);
      // this.dataList.push(oneAssembly);
    },
    initPaint() {
      // let canvas = this.$refs.canvas;
      // var ctx = canvas.getContext("2d");
      // ctx.beginPath(); //新建一条path
      // ctx.moveTo(50, 50); //把画笔移动到指定的坐标
      // ctx.lineTo(200, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线.
      // //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
      // ctx.lineTo(200, 200);
      // ctx.strokeStyle = 'black'
      // ctx.lineWidth=1;
      // ctx.stroke(); //绘制路径。
      let root = document.querySelector("#paintArea");
      let width = parseInt(window.getComputedStyle(root).width) - 280;
      let height = parseInt(window.getComputedStyle(root).height);
      const app = new PIXI.Application({
        width,
        height,
        backgroundColor: 0xffffff,
        antialias: true, // 抗锯齿
        resolution: window.devicePixelRatio || 1, // 根据屏幕的实际分辨率渲染
      });
      
      root.appendChild(app.view);
      app.stage.sortableChildren = true; // 根容器
      app.renderer.autoResize = true;
      this.app = app;

      // 根据现有组件数组渲染出Spirit
      this.dataList.forEach((el) => {
        let spirit = this.createSpirit(el);

        this.spiritList = [...this.spiritList, spirit];
        this.app.stage.addChild(spirit);
      });

      // let logo = PIXI.Sprite.from(require("../assets/logo.png"));
      // logo.position.set(100, 100);
      // logo.height = 100;
      // logo.width = 100;
      // logo.interactive = true; //响应交互
      // logo.buttonMode = true; //鼠标变手型
      // let line = new PIXI.Graphics();
      // line.lineStyle(4, 0xe1e1e1, 1);
      // line.moveTo(0, 0);
      // line.lineTo(10, 10);
      // line.lineTo(30, 20);
      // line.x = 32;
      // line.y = 32;
      // app.stage.addChild(line);
      // let dragFlag = false;
      // let startPoint = {};
      // logo.on("mousedown", (event) => {
      //   dragFlag = true;
      //   startPoint = { x: event.data.global.x, y: event.data.global.y };
      // });
      // logo.on("mousemove", (event) => {
      //   if (dragFlag) {
      //     const dx = event.data.global.x - startPoint.x;
      //     const dy = event.data.global.y - startPoint.y;
      //     logo.position.x += dx;
      //     logo.position.y += dy;
      //     startPoint = { x: event.data.global.x, y: event.data.global.y };
      //   }
      // });
      // logo.on("mouseup", () => {
      //   dragFlag = false;
      // });
      // this.app.stage.addChild(logo);
      // app.ticker.add(delta => gameLoop(delta));
      // function gameLoop(){
      //   // delta的值代表帧的部分的延迟
      // }
    },
    // 添加纹理
    addTexture(){
      PIXI.loader.add('heat','@/assets/heat.png')
    },
    addSpirit(el) {
      let assembly = new PIXI.Container();
      let spirit = this.createSpirit(el);
      assembly.addChild(spirit);
      if (el.link.length != 0) {
        let line = this.drawLine(el);
        line.forEach((el) => {
          assembly.addChild(el);
        });
      }
      this.spiritList = [...this.spiritList, assembly];
      this.app.stage.addChild(assembly);
    },
    createSpirit(el) {
      let assembly = new PIXI.Container();
      // assembly.sortableChildren = true;
      let spirit = PIXI.Sprite.from(el.img);
      spirit.position.set(el.positionX, el.positionY);
      spirit.height = el.width;
      spirit.width = el.height;
      spirit._zIndex = 10;
      spirit.interactive = true; //响应交互
      spirit.buttonMode = true; //鼠标变手型
      let dragFlag = false;
      let startPoint = {};
      spirit.on("mousedown", (event) => {
        dragFlag = true;
        let index = this.dataList.findIndex((item) => item.id == el.id);
        startPoint = { x: event.data.global.x, y: event.data.global.y };

        spirit.on("mousemove", (event) => {
          if (dragFlag) {
            const dx = event.data.global.x - startPoint.x;
            const dy = event.data.global.y - startPoint.y;
            spirit.position.x += dx;
            spirit.position.y += dy;

            this.dataList[index].positionX = spirit.position.x;
            this.dataList[index].positionY = spirit.position.y;

            assembly.children = [assembly.children[0]];

            if (el.link.length != 0) {
              let line = this.drawLine(el);
              line.forEach((el) => {
                el._zIndex = 1;
                assembly.addChild(el);
              });
            }
            startPoint = { x: event.data.global.x, y: event.data.global.y };
          }
        });
        spirit.on("mouseup", () => {
          dragFlag = false;
        });
      });
      assembly.addChild(spirit);
      if (el.link.length != 0) {
        let line = this.drawLine(el);
        line.forEach((el) => {
          assembly.addChild(el);
        });
      }
      // assembly.children = [assembly.children[0]]
      return assembly;
    },
    // 加线
    drawLine(data) {
      var arr = [];
      data.link.forEach((el) => {
        let target = this.dataList[
          this.dataList.findIndex((item) => item.id == el)
        ];
        let line = new PIXI.Graphics();
        let oldx = data.positionX;
        let oldy = data.positionY;
        let startX = 0;
        let startY = 0;
        let targetX = 0;
        let targetY = 0;
        // 判断目标在该元素的上面还是下面 切换线段起始点
        if (oldy - target.positionY > 0) {
          // 大于0 目标在下面
          startX = oldx + data.width / 2;
          startY = oldy;

          targetX = target.positionX + target.width / 2;
          targetY = target.positionY + target.height;
        } else {
          // 小于0 目标在上面
          startX = oldx + data.width / 2;
          startY = oldy + data.height;

          targetX = target.positionX + target.width / 2;
          targetY = target.positionY;
        }
        line.lineStyle(2, 0x99ccff, 1);
        line.moveTo(startX, startY);
        line.lineTo(startX, (targetY - startY) / 2 + startY);
        line.lineTo(targetX, (targetY - startY) / 2 + startY);
        line.lineTo(targetX, targetY);
        arr.push(line);
      });
      return arr;
    },
  },
  data() {
    return {
      spiritList: [],
      app: null,
      activeName: "1",
      dataList: [
        {
          id: "894651148",
          name: "矩形",
          positionX: 0,
          positionY: 0,
          width: 100,
          height: 100,
          link: ["1234651148"],
          img:
            "http://localhost/assets/heat.png",
          calcul: () => {
            console.log(this);
          },
        },
        {
          id: "1234651148",
          name: "圆形",
          positionX: 200,
          positionY: 200,
          width: 100,
          height: 100,
          link: ["1234651168"],
          img:
            "http://localhost/assets/phe.png",
        },
        {
          id: "1234651168",
          name: "圆形",
          positionX: 500,
          positionY: 50,
          width: 50,
          height: 50,
          link: ["894651148"],
          img:
            "http://localhost/assets/tank.png",
        },
      ],
      // 素材组件
      assemblyList: [
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
        {
          name: "矩形",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=642820574,1772451106&fm=26&gp=0.jpg",
        },
        {
          name: "圆形",
          img:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1643636107,1072538325&fm=26&gp=0.jpg",
        },
      ],
    };
  },
};
</script>

<style scoped>
.wrapper {
  margin-top: 10px;
}
.aside {
  padding: 10px;
  background: #fff;
  height: 90vh;
  overflow: auto;
}
::-webkit-scrollbar {
  width: 0px; /*滚动条宽度*/
  height: 16px; /*滚动条高度*/
}
#canvas {
  /* margin: 10px; */
  width: 100%;
  height: 80%;
  background: #fff;
  position: relative;
}

.assembly {
  cursor: pointer;
}

.assemblyContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
}
canvas {
  background: #fff;
}
</style>